import React, { Component } from 'react'
import { List, InputItem, Button, NavBar } from 'antd-mobile';
import "./Register.less"
import { reqregister } from '../../http/api';

export default class Register extends Component {
    constructor() {
        super()
        this.state = {
            user: {
                phone: "",
                nickname: "",
                password: ""
            }
        }
    }
    changeUser(val, key) {
        this.setState({
            user: {
                ...this.state.user,
                [key]: val
            }
        })
    }
    register() {
        reqregister(this.user).then(res => {
            if (res.data.code === 200) {

            }
        })
    }
    render() {
        return (
            <div className="register">
                <div>{JSON.stringify(this.state.user)}</div>
                <NavBar className="nav" mode="dark">注册</NavBar>
                <div>
                    <InputItem
                        clear
                        placeholder="请输入手机号"
                        onChange={(val) => this.changeUser(val, "phone")}
                    >手机号</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入昵称"
                        onChange={(val) => this.changeUser(val, "nickname")}
                    >昵称</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入密码"
                        onChange={(val) => this.changeUser(val, "password")}
                    >密码</InputItem>
                    <List.Item>
                        <div>
                            <Button className="btn" type="primary" onClick={() => this.register()}>注册</Button>
                        </div>
                    </List.Item>
                </div>
            </div>
        )
    }
}
